// 触发视图更新
function updateView(){
    console.log('视图更新')
}
// 重新定义数组原型
const oldArrayPrototype = Array.prototype
// Object.create 作用：创建新对象，原型指向 参数
const arrProto = Object.create(oldArrayPrototype)
const methods = ['push','pop','shift','unshift','sort','reserve','splice']
methods.forEach(method=>{
    arrProto[method] = function(){
        updateView()// 触发更新视图
        oldArrayPrototype[method].apply(this, arguments)
    }
})
console.log('arrProto:',arrProto)
// 重新
function defineReactive(target,key,value){
    // 深度监听
    observer(value)
    // 核心Api
    Object.defineProperty(target,key, {
        get(){
            return value
        },
        set(newValue){
            if(newValue!==value){
                // 设置新值
                observer(newValue)
                // 注意： value 一直在闭包中，此处设置完之后，在get时也是value
                value = newValue
                // 触发视图更新
                updateView()
            }
        }
    })
}
function observer(target){
    if(typeof target !== 'object' || target === null){
        // 不是对象或数组
        return target
    }
    // 判断是不是数组
    if(Array.isArray(target)){
        target.__proto__ = arrProto
    }
    // 重新定义各个属性
    for(let key in target){
        defineReactive(target, key, target[key])
    }
}

// 数据
const data = {
    name:'atguigu',
    age:20,
    address:{
        city:'北京' // 需要深度监听
    },
    arr:[2,3,4]
}

// 监听数据
observer(data)

data.name = '尚硅谷'
data.age = 21

data.address.city = '上海'

data.age = {realAge:20} // 设置新值，深度监听
console.log(data)

data.arr.push(5)
